<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>看图</title>
    <link rel="stylesheet" href="../static/dash.css">
</head>
<body>

<div class="header">

    这里是头部的一些信息

</div>

<div class="body">
    <div class="body_middle">
        <div class="first_column">
            <div class="InputBox1">
                <input id="InputBox5" type="text" value="static/picture/cfs">
                <button id="button">显示文本</button>
            </div>
            <div class="pictures">
                <ol>
                    <li>第一张</li>
                    <li>第二章</li>
                </ol>
            </div>
        </div>
        <div class="second_column">
            <div class="picture">
                <img src="../static/picture/cfs/狐狸和小王子.jpg" alt="some_text" width="300px">
            </div>
        </div>
    </div>
</div>

<div class="foot">
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("button").click(function () {
            var path = $("#InputBox5").val()
            // alert("数据：" + $("#InputBox5").attr("value")+ "\n状态：" + status);
            $.post("/api/files", {"path": path}, function (data, status) {
                var html = ''
                $(data.nameList, data.src).each(function (index, pic_name, pic_src) {
                    html += "<li>" + pic_name + "</li>"
                })
                $('.pictures ol').html(html)
            });
        });
    });

    // 要用事件委托的形式去获取ajax加载的元素
    $(document).on('click', 'li', function () {
        var path = $("#InputBox5").val()
        var pic_name = $(this).text()
        $(".picture img").attr("src" ,"/"+ path + "/" + pic_name)
    });
</script>
</html>